<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bpmn-visualization - Elements Identification</title>
    <link rel="icon" type="image/svg+xml" href="./static/img/favicon.svg">
    <style>
      #main-container {
        top: 140px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        position: absolute;
      }
      .bpmn-container {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        border-style: solid;
        border-color: #B0B0B0;
        border-width: 1px;

        position: absolute;
        overflow: hidden;
      }

      textarea {
        resize: none;
        height: 100px;
        right: 10px;
        position: absolute;
        width: 70%;
      }

      :root {
        --color-flow: dodgerblue;
        --color-msg-flow-icon: orange;
      }

      /* activity */
      .detection.bpmn-type-activity > rect:nth-child(1) {
        fill: aquamarine;
      }
      /* gateway */
      .detection.bpmn-type-gateway > path:nth-child(1) {
        stroke: chartreuse;
        stroke-width: 4;
      }
      /* event */
      .detection.bpmn-type-event > ellipse {
        stroke: red;
      }
      /* pool and lane */
      .detection.bpmn-type-container > path:nth-child(2), /* label zone */
      .detection.bpmn-type-container > path:nth-child(4) {
        fill: palevioletred;
      }
      /* group */
      .detection.bpmn-group > rect  {
        fill: #ffbaba;
      }
      /* text annotation */
      .detection.bpmn-text-annotation > rect,
      .detection.bpmn-text-annotation > path  {
        stroke: aquamarine;
      }

      /* sequence flow arrow */
      .bpmn-sequence-flow.detection > path:nth-child(3),
      /* sequence flow arrow for conditional */
      .bpmn-sequence-flow.detection > path:nth-child(4),
      /* sequence flow arrow for default  */
      .bpmn-sequence-flow.detection > path:nth-child(5),
      /* message flow start */
      .bpmn-message-flow.detection > ellipse,
      /* message flow arrow */
      .bpmn-message-flow.detection > path:nth-child(4) {
        fill: var(--color-flow);
      }
       /* sequence flow line */
      .bpmn-sequence-flow.detection > path:nth-child(2),
       /* sequence flow arrow */
      .bpmn-sequence-flow.detection > path:nth-child(3),
        /* sequence flow arrow for conditional and sequence flow default marker */
      .bpmn-sequence-flow.detection > path:nth-child(4),
        /* sequence flow arrow for default  */
      .bpmn-sequence-flow.detection > path:nth-child(5),
        /* message flow start marker */
      .bpmn-message-flow.detection > ellipse,
        /* message flow line */
      .bpmn-message-flow.detection > path:nth-child(2),
        /* message flow arrow */
      .bpmn-message-flow.detection> path:nth-child(4),
        /* association line */
      .bpmn-association.detection> path:nth-child(2){
        stroke: var(--color-flow);
        stroke-width: 4px;
      }

      /* message flow icon */
      .detection.bpmn-message-flow-icon > rect,
      .detection.bpmn-message-flow-icon > path {
        stroke: var(--color-msg-flow-icon);
        stroke-width: 3px;
      }
      /* special for msg flow icon non-initiating */
      .detection.bpmn-message-flow-icon.bpmn-icon-non-initiating > rect {
        fill: var(--color-msg-flow-icon);
      }
      .detection.bpmn-message-flow-icon.bpmn-icon-non-initiating > path {
        stroke: white;
      }

      /* apply shadow on hover */
      .detection:not(.bpmn-type-flow):hover {
        filter: drop-shadow(0 0 1rem rgba(0, 0, 0));
      }
      .detection.bpmn-type-flow:hover > path {
        stroke-width: 6px !important;
      }

      /* for labels */
      .detection.bpmn-label > g div {
        color: red !important;
      }
      .detection.bpmn-type-container.bpmn-label > g div {
        color: white !important;
      }
      .detection.bpmn-type-flow.bpmn-label > g div {
        color: var(--color-flow) !important;
      }
    </style>
    <script src="../ts/pages/elements-identification.ts" type="module"></script>
</head>
<body>
    <div id="controls">
      <label for="bpmn-kinds-select">Select by Kinds:</label><select id="bpmn-kinds-select">
        <option value="task">Abstract Task</option>
        <option value="userTask">User Task</option>
        <option value="scriptTask">Script Task</option>
        <option value="serviceTask">Service Task</option>
        <option value="receiveTask">Receive Task</option>
        <option value="sendTask">Send Task</option>
        <option value="manualTask">Manual Task</option>
        <option value="businessRuleTask">Business Rule Task</option>
        <option value="startEvent">Start Event</option>
        <option value="endEvent">End Event</option>
        <option value="intermediateCatchEvent">Catch Event</option>
        <option value="intermediateThrowEvent">Throw Event</option>
        <option value="boundaryEvent">Boundary Event</option>
        <option value="exclusiveGateway">Exclusive Gateway</option>
        <option value="inclusiveGateway">Inclusive Gateway</option>
        <option value="parallelGateway">Parallel Gateway</option>
        <option value="eventBasedGateway">Event Based Gateway</option>
        <option value="complexGateway">Complex Gateway</option>
        <option value="lane">Lane</option>
        <option value="pool">Pool</option>
        <option value="callActivity">Call Activity</option>
        <option value="subProcess">Sub-Process</option>
        <option value="group">Group</option>
        <option value="textAnnotation">Text Annotation</option>
        <option value="messageFlow">Message Flow</option>
        <option value="sequenceFlow">Sequence Flow</option>
        <option value="association">Association</option>
      </select>
      <button id="clear-btn">Clear</button>
      <textarea id="elements-result"></textarea>
    </div>
    <div id="display-options" style="margin-top: 1em;">
      <label for="checkbox-display-overlays">Display overlays</label><input id="checkbox-display-overlays" type="checkbox" />

      <label for="checkbox-css-style" title="To style the BPMN elements, check if you want to use CSS; otherwise not, if you want to use the API" class="tooltip">Use CSS style</label>
      <input id="checkbox-css-style" type="checkbox" />
    </div>
    <div id="download-controls" style="margin-top: 1em;">
      <button id="btn-dl-svg">Download SVG</button>
      <button id="btn-dl-png">Download PNG</button>
    </div>

    <div id="main-container">
      <div class="bpmn-container"></div>
    </div>
</body>
</html>
